<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <style>
        table{
            width: 100%;
        }
        table, td{
            border-collapse: collapse;
        }
        td{
            padding: 20px;
        }
    </style>
</head>
<body>
    <div style="width:1200px;margin: 20px auto;">
        <h2>新增电影</h2>
        <hr>
        电影名称: <input type="text"><br>
        导演: <input type="text"><br>
        <button>新增</button>
        <hr>
        <table border="1">
            <thead>
                <tr><td>ID</td><td>电影名</td><td>导演</td><td>操作</td></tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script>
        //获取按钮
        let btn = document.querySelector('button');
        //获取tbody
        let tbody = document.querySelector('tbody');

        //绑定事件
        btn.onclick = async function(){
            //获取电影的名称
            let name = document.querySelectorAll('input')[0].value;
            //获取导演的名字
            let director = document.querySelectorAll('input')[1].value;

            try{
                //发送请求  data {id, name, director}
                let {data} = await axios({
                    method: 'post',
                    url: 'http://127.0.0.1:3000/movie',
                    //请求体
                    data: {
                        name,
                        director
                    }
                });
                //提示
                alert('添加成功');
                //根据返回的结果 创建 tr 并插入即可
                createTr(data);
            }catch(e){
                alert('添加失败');   
            }
        }

        //声明 async 函数
        async function main(){
            //发送请求获取所有的电影信息
            let {data} = await axios({
                method: 'get',
                url: 'http://127.0.0.1:3000/movie'
            });

            //遍历响应体数组 
            data.forEach(item => {
                //调用函数
                createTr(item);
            })
        }

        main();

        //封装一个函数  通过数据创建 tr 元素并插入 tbody
        // data   {id, name, director}
        function createTr(data){
            //创建 tr
            let tr = document.createElement('tr');
            //创建 td
            let td1 = document.createElement('td');
            //设置 id 的文本
            td1.innerHTML = data.id;
            //创建 td
            let td2 = document.createElement('td');
            //设置 id 的文本
            td2.innerHTML = data.name ? data.name : '';
            //创建 td
            let td3 = document.createElement('td');
            //设置 id 的文本
            td3.innerHTML = data.director || '';
            //创建 td
            let td4 = document.createElement('td');
            //设置 id 的文本
            // td4.innerHTML = `<button class="del">删除</button>`;
            //创建 btn 删除按钮
            let delBtn = document.createElement('button');
            delBtn.className = 'del';
            delBtn.innerHTML = '删除';
            td4.appendChild(delBtn);
            //为 btn 绑定事件
            delBtn.onclick = async function(){
                //确认框
                if(!confirm('您确定要删除该条数据么 ?')) return;
                try{
                    let res = await axios({
                        method: 'delete',
                        url: 'http://127.0.0.1:3000/movie/' + data.id
                    });

                    //删除元素 tr 元素   removeChild 删除元素    tbody.removeChild(tr);
                    tbody.removeChild(this.parentNode.parentNode);
                    //提醒
                    alert('删除成功');
                }catch(e){
                    //失败提醒
                    alert('删除失败~~');
                }
            }

            //拼装
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            //将 tr 插入到 tbody 中
            tbody.appendChild(tr);
        }

    </script>
</body>
</html>